<template>
	<!-- 电力 -->
	<div class="flex-col h100">
		<my-box title="总览" class="top"> <List :data="data1" /></my-box>
		<my-box class="f1 h0 m-t-10" title="设备概览">
			<my-table
				height="200"
				:columns="[
					{
						label: '名称',
						prop: 'substationName',
						width: '120'
					},
					{
						label: '高爆开关负载数量',
						prop: 'highExplosiveCount',
						width: '140'
					},
					{
						label: '低反馈电开关负载数量',
						prop: 'lowTensionCount',
						width: '170'
					}
				]"
				:data="data2"
			/>
		</my-box>
		<my-box class="f1 h0 m-t-10" title="设备告警概览">
			<my-table
				height="200"
				:columns="[
					{
						label: '区域',
						prop: 'substationName'
					},
					{
						label: '告警数',
						prop: 'warningCount',
						align: 'center'
					}
				]"
				:data="data3"
			>
				<template #warningCount="{ row }">
					<span class="st" :style="{ color: row.warningCount > 0 ? '#3AB973' : '#E76060' }">{{ row.warningCount }}</span>
				</template>
			</my-table>
		</my-box>
	</div>
</template>

<script setup>
import { electricOverview, deviceInfo, warningInfo } from '@a/home'
import List from './component/List.vue'

// 总览
let data1 = ref([
	{ name: '变电所数量', subname: 'Substation', value: 178, unit: '个', icon: 'biandiansuo' },
	{ name: '高爆开关数量', subname: 'High explosive switch', value: 78, unit: '个', icon: 'gaobaokaiguan' },
	{ name: '变压器数量', subname: 'Transformer', value: 78, unit: '个', icon: 'bianyaqi' },
	{ name: '低压馈电开关数量', subname: 'Low-voltage feed switch', value: 22, unit: '个', icon: 'diyakuidiankaiguan' }
])
electricOverview().then((res) => {
	data1.value[0].value = res.data.substationCount
	data1.value[1].value = res.data.highExplosiveCount
	data1.value[2].value = res.data.transformerCount
	data1.value[3].value = res.data.lowTensionCount
})
// 设备概览
let data2 = ref([])
deviceInfo().then((res) => {
	data2.value = res.data
})
// 设备告警概览
let data3 = ref([])
warningInfo().then((res) => {
	data3.value = res.data
})
</script>

<style lang="scss" scoped>
.all {
	.item {
		height: 48px;
		border-radius: 2px;
		background: #030f27;
		box-sizing: border-box;
		border: 1px solid rgba(76, 107, 209, 0.5);
		box-shadow: inset 0px 0px 12px 0px #3468d8;
		&:not(:first-child) {
			margin-top: 10px;
		}
	}
}
.length {
	color: #397bfd;
	font-size: 14px;
	font-weight: bold;
	margin-left: 4px;
}
:deep(.el-progress__text) {
	color: #fff;
}
.st {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
</style>
